<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2017-2018 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div *ngIf="loading; else elseBlock">
    <winery-loader></winery-loader>
    <br>
    <div *ngIf="showProgress" class="progress" style="">
        <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': service.uploader.progress + '%' }"></div>
    </div>
</div>
<ng-template #elseBlock>
    <input *ngIf="allowMultipleFiles; else singleFile" type="file" ng2FileSelect [uploader]="service.uploader"
           [disabled]="!isEditable"
           (change)="dropFile()" multiple/>
    <ng-template #singleFile>
        <input type="file" ng2FileSelect [disabled]="!isEditable"
               [uploader]="service.uploader" (change)="dropFile()"/>
    </ng-template>
    <br>
    <div ng2FileDrop
         class="dropZone noFile"
         [ngClass]="{'fileOver': fileOver}"
         (fileOver)="dropFile($event)"
         [uploader]="service.uploader">
        You may <span style="font-weight:bold;">drop the file<span *ngIf="allowMultipleFiles">s</span></span> here.
    </div>
    <p *ngIf="uploadImmediately">The file<span *ngIf="allowMultipleFiles; else singleFileVerb">s are </span>
        <ng-template #singleFileVerb> is </ng-template>
        <span style="font-weight:bold;">immediately</span> uploaded without any confirmation.
    </p>
</ng-template>
<div *ngIf="error">
    <div class="bs-callout bs-callout-danger">
        <div style="white-space: pre-wrap;">{{errorMessage}}</div>
    </div>
</div>
